<template>
    <div id="app">
      <!-- 父组件 -- {{ $store.state.title }} -- {{ $store.state.count }}
      <br>
      <Son1/>
      <br>
      <Son2/> -->
      <!-- vuex -->
      <!-- <MyDay11/>
      <MyDay11s/> -->
      <!-- v-model拆分 -->
     
      <!-- <Student :value="age" @input="age = $event.target.value"></Student> -->
      <!-- <button @click="isShow=true">点击退出登录</button> -->
      <!-- <BaseDialog :visible="isShow" @update:visible="isShow=$event" /> -->
      <!-- 场景:封装弹框类的基础组件，visible属性 true显示false隐藏 -->
      <!-- <Children :visible.sync = 'isShow' /> -->
      <!-- <Children />
      {{ name }} -->
      <attr/>
      <!-- provide & inject -->
      <!-- <button @click="changeColor">修改颜色</button>
      <button @click="changeName">修改姓名</button> -->
    </div>
  </template>
  
  <script>
  import Children from './components/Children.vue'
  // import MyDay06 from './components/day06.vue'
  // import MyDay07 from './components/day07.vue'
  // import MyDay08 from './components/day08.vue'
  // import MyDay09 from './components/day09.vue'
  // import MyDay10 from './components/day10.vue'
  // import Son1 from './components/Son1.vue'
  // import Son2 from './components/Son2.vue'
  // import MyDay11 from './components/day11.vue'
  // import MyDay11s from './components/day11s.vue'
  import attr from "./components/atter.vue"
  
  
  export default {
    // provide(){
    //   return {
    //     color:this.color,
    //     info:this.info
    //   }
    // },
    name: 'App',
    data () {
      return{
        // selectId:"2",
        // isShow:false
        // 普通数据类型不是响应式
        color:'pink',
        // 复杂数据类型是响应式
        info:{
          name:'ljep'
        },
        name:''
      }
    },
    components: {
      // Son1,
      // Son2,
      // MyDay11,
      // MyDay11s
      // Children
      attr
    },
    methods:{
      // changeColor(){
      //   this.color='red'
      // },
      // changeName(){
      //   this.info.name='lhb'
      // },
    },
    mounted() {
      this.name = this.$children[0].name
    },
  }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>
  